import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
//导入公共依赖模块
import {
  ShareModule,
  NzMessageService,
  FormControl,
  FormGroup,
  NonNullableFormBuilder,
  Validators
} from '@app/share/share.module';
import { register_API, login_API } from '@/api/user';
import { setStore } from '@/utils';
@Component({
  selector: 'app-login',
  standalone: true, //是否为独立组件
  imports: [ShareModule],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
// 定义一个LoginComponent类，实现AfterViewInit接口
export class LoginComponent implements AfterViewInit {
  bgList = Array.from({ length: 24 }).map((_, i) => `/assets/${i + 1}.webp`);
  @ViewChild('animatedBanner') banner: ElementRef;
  @ViewChild('animatedBanner2') banner2: ElementRef;
  @ViewChild('video') video: ElementRef;
  @ViewChild('video2') video2: ElementRef;
  //表单校验
  validateForm: FormGroup<{
    userName: FormControl<string>;
    password: FormControl<string>;
  }> = new FormGroup({
    userName: new FormControl<string>('', [Validators.required]),
    password: new FormControl<string>('', [Validators.required])
  });

  constructor(
    private fb: NonNullableFormBuilder,
    private message: NzMessageService,
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.fb = fb; //初始化
    this.validateForm = this.fb.group({
      userName: ['', [Validators.required]],
      password: ['', [Validators.required]]
    });
  }

  bannerLeft = 0;
  bannerLeft2 = 0;
  bannerWidth = 0;
  bannerWidth2 = 0;
  initMouseLeft = 0;
  initMouseLeft2 = 0;

  styleMap = {};
  styleMap2 = {};
  queryParams: any = {};

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.queryParams = params;
    });
  }

  _handleLogin() {
    const { userName, password } = this.validateForm.value;
    login_API({ userid: userName, password })
      .then(res => {
        if (res.code !== 200) {
          this.message.create('error', res.msg);
          return;
        }
        //存sessionStorage缓存
        setStore({
          name: 'userInfo',
          content: res.data,
          type: true
        });
        if (this.queryParams.fileid) {
          let { fileid, filename, username } = this.queryParams;
          this.router.navigate(['/invited'], {
            queryParams: { fileid, filename, username }
          });
        } else {
          this.router.navigate(['/dashboard/welcome']);
        }
        this.message.create('success', '登录成功!');
      })
      .catch(err => {
        this.message.create('error', err);
      });
  }
  _handleRegister() {
    const { userName, password } = this.validateForm.value;
    register_API({ userid: userName, password })
      .then(res => {
        if (res.code !== 200) {
          this.message.create('error', res.msg);
          return;
        }
        this._login();
        this.message.create('success', '注册成功!');
      })
      .catch(err => {
        this.message.create('error', err);
      });
  }

  // 登录
  submitForm(type: 'login' | 'register'): void {
    if (!this.validateForm.valid) return;
    if (type === 'login') {
      //登录逻辑
      this._handleLogin();
    } else {
      //注册逻辑
      this._handleRegister();
    }
  }
  isLogin = true;
  // 去注册
  _register() {
    this.isLogin = false;
  }
  // 去登录
  _login() {
    this.isLogin = true;
  }

  init = () => {
    Object.keys(this.styleMap).forEach(item => {
      const current = this.styleMap[item];
      const initStyle = current.initialStyle;
      if (current.element) {
        current.element.style = `height: ${initStyle.height}; width: ${
          initStyle.width
        }; transform: translate(${initStyle.translateX}px, ${
          initStyle.translateY
        }px) rotate(${initStyle.rotate}deg) scale(${
          initStyle.scale
        }); opacity: ${initStyle.opacity}; object-fit: ${initStyle.objectFit}`;
      }
    });
  };
  init2 = () => {
    Object.keys(this.styleMap2).forEach(item => {
      const current = this.styleMap2[item];
      const initStyle = current.initialStyle;
      if (current.element) {
        current.element.style = `height: ${initStyle.height}; width: ${
          initStyle.width
        }; transform: translate(${initStyle.translateX}px, ${
          initStyle.translateY
        }px) rotate(${initStyle.rotate}deg) scale(${
          initStyle.scale
        }); opacity: ${initStyle.opacity}; object-fit: ${initStyle.objectFit}`;
      }
    });
  };

  playVideo = () => {
    //谷歌浏览器自动播放视频需要静音
    this.video.nativeElement.muted = true;
    this.video.nativeElement.play();
    this.video2.nativeElement.muted = true;
    this.video2.nativeElement.play();
  };
  calcutedPosition = (mouseLeft, scale) => {
    return (-(mouseLeft - this.initMouseLeft) * scale) / this.bannerWidth;
  };
  calcutedPosition2 = (mouseLeft, scale) => {
    return (-(mouseLeft - this.initMouseLeft2) * scale) / this.bannerWidth2;
  };
  startListener = () => {
    this.banner.nativeElement.addEventListener('mousemove', event => {
      event.stopPropagation();
      const mouseLeft = event.pageX - this.bannerLeft;

      Object.keys(this.styleMap).forEach(item => {
        const current = this.styleMap[item];
        const initStyle = current.initialStyle;
        const style = current.style;
        const element = current.element;
        if (element && current.style) {
          // 计算偏移
          const offset = this.calcutedPosition(mouseLeft, style.scale);
          let styleResult = `height: ${initStyle.height}; width: ${
            initStyle.width
          }; opacity: ${initStyle.opacity}; object-fit: ${
            initStyle.objectFit
          };`;

          if (style.direction === 'y') {
            styleResult += `transform: translate(${
              initStyle.translateX
            }px, ${initStyle.translateY - offset}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          } else {
            styleResult += `transform: translate(${initStyle.translateX -
              offset}px, ${initStyle.translateY}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          }
          element.style = styleResult;
        }
      });
    });
  };
  startListener2 = () => {
    this.banner2.nativeElement.addEventListener('mousemove', event => {
      event.stopPropagation();
      const mouseLeft = event.pageX - this.bannerLeft2;

      Object.keys(this.styleMap).forEach(item => {
        const current = this.styleMap2[item];
        const initStyle = current.initialStyle;
        const style = current.style;
        const element = current.element;
        if (element && current.style) {
          // 计算偏移
          const offset = this.calcutedPosition2(mouseLeft, style.scale);
          let styleResult = `height: ${initStyle.height}; width: ${
            initStyle.width
          }; opacity: ${initStyle.opacity}; object-fit: ${
            initStyle.objectFit
          };`;

          if (style.direction === 'y') {
            styleResult += `transform: translate(${
              initStyle.translateX
            }px, ${initStyle.translateY - offset}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          } else {
            styleResult += `transform: translate(${initStyle.translateX -
              offset}px, ${initStyle.translateY}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          }
          element.style = styleResult;
        }
      });
    });
  };
  clearListener = event => {
    const mouseLeft = event.pageX - this.bannerLeft;

    Object.keys(this.styleMap).forEach(item => {
      const current = this.styleMap[item];
      const style = current.style;
      const initStyle = current.initialStyle;
      const element = current.element;

      if (element && current.style) {
        // 计算偏移
        const offset = this.calcutedPosition(mouseLeft, style.scale);

        let startValue = offset;
        let endValue = 0;
        let duration = 500; // 总时间，单位为毫秒
        let interval = 50; // 每次更新的间隔时间，单位为毫秒
        let steps = duration / interval; // 总步数
        let stepValue = (startValue - endValue) / steps; // 每一步的值变化量

        let currentValue = startValue;

        let timer = setInterval(() => {
          currentValue -= stepValue;
          let styleResult = `height: ${initStyle.height}; width: ${
            initStyle.width
          }; opacity: ${initStyle.opacity}; object-fit: ${
            initStyle.objectFit
          };`;

          if (style.direction === 'y') {
            styleResult += `transform: translate(${
              initStyle.translateX
            }px, ${initStyle.translateY - currentValue}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          } else {
            styleResult += `transform: translate(${initStyle.translateX -
              currentValue}px, ${initStyle.translateY}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          }

          if (Math.abs(currentValue - endValue) < Math.abs(stepValue)) {
            clearInterval(timer);
            styleResult = `transform: translate(${initStyle.translateX}px, ${
              initStyle.translateY
            }px) rotate(${initStyle.rotate}deg) scale(${initStyle.scale});`;
          }
          element.style = styleResult;
        }, interval);
      }
    });
  };
  clearListener2 = event => {
    const mouseLeft2 = event.pageX - this.bannerLeft2;
    Object.keys(this.styleMap2).forEach(item => {
      const current = this.styleMap2[item];
      const style = current.style;
      const initStyle = current.initialStyle;
      const element = current.element;

      if (element && current.style) {
        // 计算偏移
        const offset = this.calcutedPosition2(mouseLeft2, style.scale);

        let startValue = offset;
        let endValue = 0;
        let duration = 500; // 总时间，单位为毫秒
        let interval = 50; // 每次更新的间隔时间，单位为毫秒
        let steps = duration / interval; // 总步数
        let stepValue = (startValue - endValue) / steps; // 每一步的值变化量

        let currentValue = startValue;

        let timer = setInterval(() => {
          currentValue -= stepValue;
          let styleResult = `height: ${initStyle.height}; width: ${
            initStyle.width
          }; opacity: ${initStyle.opacity}; object-fit: ${
            initStyle.objectFit
          };`;

          if (style.direction === 'y') {
            styleResult += `transform: translate(${
              initStyle.translateX
            }px, ${initStyle.translateY - currentValue}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          } else {
            styleResult += `transform: translate(${initStyle.translateX -
              currentValue}px, ${initStyle.translateY}px) rotate(${
              initStyle.rotate
            }deg) scale(${initStyle.scale});`;
          }

          if (Math.abs(currentValue - endValue) < Math.abs(stepValue)) {
            clearInterval(timer);
            styleResult = `transform: translate(${initStyle.translateX}px, ${
              initStyle.translateY
            }px) rotate(${initStyle.rotate}deg) scale(${initStyle.scale});`;
          }
          element.style = styleResult;
        }, interval);
      }
    });
  };

  /**
   * @param {*} fn 要执行的函数
   * @param {*} delay 延迟时间
   * @returns
   */
  debounce(fn, delay) {
    // 1.定义一个定时器, 保存上一次的定时器
    let timer = null;

    // 2.真正执行的函数
    const _debounce = () => {
      // 取消上一次的定时器
      if (timer) clearTimeout(timer);
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn();
      }, delay);
    };

    return _debounce;
  }

  touchListener = () => {
    this.banner.nativeElement.addEventListener('mouseenter', event => {
      event.stopPropagation();
      // 计算初始鼠标 x 位置
      this.initMouseLeft = event.pageX - this.bannerLeft;
      this.startListener();
    });
    this.banner.nativeElement.addEventListener('mouseleave', event => {
      event.stopPropagation();
      // 还原
      this.clearListener(event);
    });

    this.banner2.nativeElement.addEventListener('mouseenter', event => {
      event.stopPropagation();
      // 计算初始鼠标 x 位置
      this.initMouseLeft2 = event.pageX - this.bannerLeft2;
      this.startListener2();
    });
    this.banner2.nativeElement.addEventListener('mouseleave', event => {
      event.stopPropagation();
      // 还原
      this.clearListener2(event);
    });
  };

  //相当于mounted
  ngAfterViewInit(): void {
    this.styleMap = {
      0: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(1)')
          .querySelector('img')
      },
      1: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'y',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(2)')
          .querySelector('img')
      },
      2: {
        initialStyle: {
          height: '224.4px',
          width: '2400px',
          translateX: 300,
          translateY: 24,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(3)')
          .querySelector('img')
      },
      3: {
        initialStyle: {
          height: '205.7px',
          width: '2200px',
          translateX: 330,
          translateY: 33,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 50
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(4)')
          .querySelector('img')
      },
      4: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(5)')
          .querySelector('img')
      },
      5: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(6)')
          .querySelector('img')
      },
      6: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(7)')
          .querySelector('img')
      },
      7: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 2
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(8)')
          .querySelector('img')
      },
      8: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(9)')
          .querySelector('img')
      },
      9: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(10)')
          .querySelector('img')
      },
      10: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 50
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(11)')
          .querySelector('img')
      },
      11: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(12)')
          .querySelector('img')
      },
      12: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 30
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(13)')
          .querySelector('img')
      },
      13: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 30
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(14)')
          .querySelector('img')
      },
      14: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(15)')
          .querySelector('img')
      },
      15: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 20
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(16)')
          .querySelector('img')
      },
      16: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(17)')
          .querySelector('img')
      },
      17: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: -100,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 20
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(18)')
          .querySelector('img')
      },
      18: {
        initialStyle: {
          height: '168.3px',
          width: '1800px',
          translateX: -90,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 400
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(19)')
          .querySelector('img')
      },
      19: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(20)')
          .querySelector('img')
      },
      20: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(21)')
          .querySelector('img')
      },
      21: {
        initialStyle: {
          height: '100px',
          width: '180px',
          translateX: -245,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1,
          objectFit: 'cover'
        },
        style: null,
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(22)')
          .querySelector('video')
      },
      22: {
        initialStyle: {
          height: '205.7px',
          width: '2200px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 200
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(23)')
          .querySelector('img')
      },
      23: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 200
        },
        element: this.banner.nativeElement
          .querySelector('.layer:nth-child(24)')
          .querySelector('img')
      }
    };
    this.styleMap2 = {
      0: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(1)')
          .querySelector('img')
      },
      1: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'y',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(2)')
          .querySelector('img')
      },
      2: {
        initialStyle: {
          height: '224.4px',
          width: '2400px',
          translateX: 300,
          translateY: 24,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(3)')
          .querySelector('img')
      },
      3: {
        initialStyle: {
          height: '205.7px',
          width: '2200px',
          translateX: 330,
          translateY: 33,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 50
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(4)')
          .querySelector('img')
      },
      4: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(5)')
          .querySelector('img')
      },
      5: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(6)')
          .querySelector('img')
      },
      6: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(7)')
          .querySelector('img')
      },
      7: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 2
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(8)')
          .querySelector('img')
      },
      8: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(9)')
          .querySelector('img')
      },
      9: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(10)')
          .querySelector('img')
      },
      10: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 50
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(11)')
          .querySelector('img')
      },
      11: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(12)')
          .querySelector('img')
      },
      12: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 30
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(13)')
          .querySelector('img')
      },
      13: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 30
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(14)')
          .querySelector('img')
      },
      14: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: null,
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(15)')
          .querySelector('img')
      },
      15: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 20
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(16)')
          .querySelector('img')
      },
      16: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(17)')
          .querySelector('img')
      },
      17: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: -100,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 20
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(18)')
          .querySelector('img')
      },
      18: {
        initialStyle: {
          height: '168.3px',
          width: '1800px',
          translateX: -90,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 400
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(19)')
          .querySelector('img')
      },
      19: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(20)')
          .querySelector('img')
      },
      20: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 10
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(21)')
          .querySelector('img')
      },
      21: {
        initialStyle: {
          height: '100px',
          width: '180px',
          translateX: -245,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1,
          objectFit: 'cover'
        },
        style: null,
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(22)')
          .querySelector('video')
      },
      22: {
        initialStyle: {
          height: '205.7px',
          width: '2200px',
          translateX: 0,
          translateY: 0,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 200
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(23)')
          .querySelector('img')
      },
      23: {
        initialStyle: {
          height: '187px',
          width: '2000px',
          translateX: 0,
          translateY: 15,
          rotate: 0,
          scale: 1,
          opacity: 1
        },
        style: {
          direction: 'x',
          scale: 200
        },
        element: this.banner2.nativeElement
          .querySelector('.layer:nth-child(24)')
          .querySelector('img')
      }
    };
    this.bannerLeft = this.banner.nativeElement.offsetLeft;
    this.bannerLeft2 = this.banner2.nativeElement.offsetLeft;
    this.bannerWidth = this.banner.nativeElement.offsetWidth;
    this.bannerWidth2 = this.banner2.nativeElement.offsetWidth;
    this.init();
    // this.init2();
    this.playVideo();
    this.touchListener();
  }
}
